<template>
  <div class="company-container">
    <div class="title-container">
      <div class="title-left">
        <div class="title">企业推荐</div>
        <AsideNumber :data="asideData" />
      </div>
      <More />
    </div>
    <div class="detail-container">
      <CompanyItem v-for="(item, i) in detailData" :key="i" :data="item" />
    </div>
  </div>
</template>

<script>
import AsideNumber from "./AsideNumber.vue";
import More from "./More.vue";
import CompanyItem from "./CompanyItem.vue";
import img1 from "@/assets/data/exports/Rectangle1394.png"
import img2 from "@/assets/data/exports/Rectangle13941.png"
import img3 from "@/assets/data/exports/Rectangle13942.png"
export default {
  components: {
    AsideNumber,
    More,
    CompanyItem,
  },
  data() {
    return {
      asideData: [
        {
          text: "企业推荐数",
          number: 3,
        },
      ],
      detailData: [
        {
          img: img1,
          company: "中科院成都信息技术股份有限公司",
          tag: "互联网",
        },
        {
          img: img2,
          company: "中国电信股份有限公司四川分公司",
          tag: "互联网",
        },
        {
          img: img3,
          company: "四川品品食品有限公司",
          tag: "互联网",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.company-container {
  .title-container {
    height: 25px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .title-left {
      height: 100%;
      display: flex;
      align-items: center;
      .title {
        font-size: 22px;
        font-weight: bold;
        display: inline-block;
        margin-right: 20px;
      }
    }
  }
  .detail-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px
  }
}
</style>
